<template>
  <a-col :span="workSpaceItem.width || 24">
    <div class="protal-compt-wrapper dealt-protal-compt-wrapper" ref="dealtCenter">
      <a-card :bordered="false">
        <div slot="title" class="title">
          <span>{{$t('portal.dealtCenter')}}</span><a-icon type="form" class="edit-btn" @click="openConfig" />
        </div>

        <div class="card-content-area">
          <!-- <to-do-page
            :tabCategoryList="tabCategoryList"
            :workSpaceItem="workSpaceItem">
          </to-do-page> -->
          <!-- 新增后期删除 -->
           <div style="width:100%;height:100%;overflow:scroll;">
            <toPage :tabCategoryList="tabCategoryList" :fromName="'protal'" widthStyle="66%"></toPage>
          </div>

          <!-- <a-tabs v-model="activeTab" @change="tabChange">
            <a-tab-pane v-for="(item) in todoTabs" :key="item.name">
              
              <span slot="tab" class="tab-area">
                {{item.name}}
                <span class="tip-area"><a-badge :count="item.count" :overflowCount="10000"></a-badge></span>
              </span>
              
              <todo-table :dataList="todoActiveData"></todo-table>
              
              <div class="page-box" style="text-align:right;">
                <div style="display:inline-block;margin-top:10px;">
                  <a-pagination
                    v-model="currentPage"
                    :total="totalSize"
                    :show-total="total => `共${total}条`"
                    :page-size="pageSize"
                    :page-size-options="['10','20','30']"
                    :show-size-changer="true"
                    :show-less-items="true"
                    :show-quick-jumper="true"
                    @showSizeChange="showSizeChange"
                    @change="pageChange">
                  </a-pagination>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs> -->
        </div>
      </a-card>
      <dealt-config-modal
       :visible="cfgModalStatus"
       :categroyList="tabList"
       :workSpaceItem="workSpaceItem"
       @ok="submitOK"
       @cancel="cancelModal"
       :getContainer="getContainer"></dealt-config-modal>
    </div>
  </a-col>
</template>
<script>
import { getCategoryFromFuns} from '@/api/devportalApi.js'
import ToDoList from './ToDoList'
import TodoTable from './TodoTable.vue'
import DealtConfigModal from './DealtConfigModal'
// import ToDoPage from './toDoPage/toDoPage'
import {mapState} from 'vuex'
import clonedeep from 'lodash.clonedeep'
// import jiashuju from './datatemp'
import toPage from '@/views/plmHomePage/toDoPage/toDoPage.vue' //新增后期删除
let categoryOrigin = [
  {
    name: '待办流程',
    id: '1',
    rank: 1
  },
  {
    name: '待执行任务',
    id: '2',
    rank: 2
  },
  {
    name: '待审核任务',
    id: '3',
    rank: 3
  },
  {
    name: '需求管理',
    id: '4',
    rank: 4
  }
]
export default {
  name: 'DealtCenter',
  props: {
    dataUrl: {
      type: String,
      defualt: ''
    },
    workSpaceItem: {
      type: Object,
      defualt: () => ({})
    }
  },
  data () {
    return {
      activeTab: '',
      modalTitle: '',
      cfgModalStatus: false,
      todoTabs: [],
      extras: {},
      todoActiveData: [],
      currentPage: 1,
      totalSize: 0,
      pageSize: 10,
      tabCategoryList: [],
      countList:{//新增后期删除
        toDoProcessNum:19,
        outTask:4,
        tasksToBeReviewed:0,
      },
    }
  },
  computed: {
    ...mapState({
      toDoProcessNum: (state) => state.todoData.toDoProcessNum,
      outTask: (state) => state.todoData.outTask,
      toReviewedTask: (state) => state.todoData.toReviewedTask,
      demandManage: (state) => state.todoData.demandManage,
    }),
    tabList () {
      if (this.workSpaceItem.personalConfig) {
        let contentSortList = this.workSpaceItem.personalConfig.contentSortList
        let tempArr = clonedeep(categoryOrigin)
        tempArr.forEach(item => {
          let obj = contentSortList.find(obj1 => obj1.contentId == item.id)
          if (obj) {
            item.rank = obj.rank
          }
        })
        tempArr.sort((a, b) => a.rank - b.rank)
        return tempArr
      }
      return categoryOrigin
    }
  },
  components: {
    ToDoList,
    TodoTable,
    DealtConfigModal,
    toPage
    // ToDoPage
  },
  methods: {
    // showSizeChange (current, pageSize) {
    //   this.currentPage = current
    //   this.pageSize = pageSize
    //   this.getTodoDataForTab()
    // },
    // pageChange (page) {
    //   this.currentPage = page
    //   this.getTodoDataForTab()
    // },
    tabChange () {
      this.currentPage = 1
      this.pageSize = 10
      this.getTodoDataForTab()
    },
    openConfig () {
      this.cfgModalStatus = true
    },
    getContainer () {
      return this.$refs.dealtCenter
    },
    submitOK () {
      this.$emit('refreshPersonalConfig')
      this.cfgModalStatus = false
    },
    cancelModal () {
      this.cfgModalStatus = false
    },
    // getTodoDataForTab () {
    //   let data = {
    //     // userId: 'wcadmin',
    //     category: this.activeTab,
    //     extras: {...this.extras},
    //     page: this.currentPage - 1,
    //     size: this.pageSize
    //   }
    //   getToDoDataList(data).then((res) => {
    //     console.log(res);
    //     if (res.status == 200) {
    //       let data = res.data ? res.data : {}
    //       this.todoActiveData = data.content
    //       this.extras = {...data.extras}
    //       this.pageSize = data.size
    //       this.totalSize = data.totalPages * data.size
    //       // 设置当前徽标数字
    //       this.todoTabs.forEach(item => {
    //         if (item.name === this.activeTab) {
    //           this.$set(item, 'count', this.totalSize)
    //         }
    //       })
    //     }
    //   })
    // },
    getCategoryAndShowTabs () {
      getCategoryFromFuns().then(res => {
        if (res.status == 200 && res.data && res.data.content && res.data.content.length > 0) {
          let data = res.data ? res.data : {}
          console.log(data, 209);
          let arr = []
          data.content.forEach(item => {
            if (item.category) {
              arr.push(item.category.split(','))
            }
          })
          let categoryArr = []
          arr.forEach(item => {
            categoryArr.push(...item)
          })
          categoryArr.push("需求管理")
          // 得到tab分类
          categoryArr = [...new Set(categoryArr)]
          categoryArr = categoryArr.map((item, index) => {
            return {
              name: item,
              id: item == '待办流程' ? '1' : item == '待执行任务' ? '2' : item == '待审核任务' ? '3': item == '需求管理' ? '4' : '无',
              rank: index
            }
          })
          // categoryArr.forEach(v => {
          //   switch (v['name']) {
          //     case '待办流程':
          //       this.$set(v, 'tagEnName', 'To do process')
          //       break
          //     case '待执行任务':
          //       this.$set(v, 'tagEnName', 'Tasks to be performed')
          //       break
          //     case '待审核任务':
          //       this.$set(v, 'tagEnName', 'Tasks to be reviewed')
          //       break 
          //     case '需求管理':
          //       this.$set(v, 'tagEnName', 'Demand Management')
          //       break
          //   }
          // })
          // 根据用户配置处理分类
          if (this.workSpaceItem.personalConfig && this.workSpaceItem.personalConfig.contentSortList.length > 0) {
            let contentSortList = this.workSpaceItem.personalConfig.contentSortList
            let resTabs = categoryArr.filter(item => contentSortList.some(obj => obj.contentId == item.id))
            resTabs.forEach(item => {
              let obj = contentSortList.find(objs => objs.contentId == item.id)
              item.rank = (obj && obj.rank) ? obj.rank : (item.rank|| '');
            })
            resTabs.sort((a, b) => a.rank - b.rank)
            this.tabCategoryList = resTabs
          } else {
            this.tabCategoryList = categoryArr
          }
          this.$set(this.tabCategoryList[0], 'num', this.$store.state.todoData.toDoProcessNum)
          this.$set(this.tabCategoryList[1], 'num', this.$store.state.todoData.outTask)
          this.$set(this.tabCategoryList[2], 'num', this.$store.state.todoData.toReviewedTask)
          // this.$set(this.tabCategoryList[3], 'num', this.$store.state.todoData.demandManage)
          console.log(this.tabCategoryList, 262);
        } else {
          this.$message.warn('功能区暂无数据！')
        }
      })
    }
  },
  created () {
    // resTabs.forEach(item => {
    //       let obj = contentSortList.find(obj => obj.contentId == item.id)
    //       item.rank = obj.rank
    //     })
    //     resTabs.sort((a, b) =>a.rank - b.rank)
    // 调用功能区查询接口获取分类标识
    this.getCategoryAndShowTabs()
  },
  mounted () {
    // if (this.dataUrl) {
    // }
  },
  watch: {
    toDoProcessNum() {
      if (this.tabCategoryList.length) {
        this.$set(this.tabCategoryList[0], 'num', this.toDoProcessNum)
      }
    },
    outTask() {
      if (this.tabCategoryList.length >= 2) {
        this.$set(this.tabCategoryList[1], 'num', this.outTask)
      }
    },
    toReviewedTask() {
      if (this.tabCategoryList.length >= 3) {
        this.$set(this.tabCategoryList[2], 'num', this.toReviewedTask)
      }
    },
    demandManage() {
      if (this.tabCategoryList.length >= 4) {
        this.$set(this.tabCategoryList[3], 'num', this.demandManage)
      }
    },
    dataUrl () {
     
    },
    workSpaceItem: {
      handler: function () {
        this.getCategoryAndShowTabs()
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/views/devportal/portalModules/index.less';
.dealt-protal-compt-wrapper {
  margin-bottom: 0px;
  .card-content-area {
    overflow-y: hidden !important;
  }
  .tab-area {
    position: relative;
    .tip-area {
      position: absolute;
      top: -10px;
      right: -32px;
    }
  }
}
.protal-compt-wrapper .card-content-area {
  // height: 483px !important;
  height: calc(100vh - 453px) !important;
}
.tab-title {
  width: 100%;
  height: 30px;
  //background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}
.taskNum {
  min-width: 18px;
  height: 18px;
  border-radius: 100px;
  background-color: #f5222d;
  margin: -15px 0px 0px 5px;
  padding: 0px 3px 0px 3px;
  line-height: 18px;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}
</style>